<template>
  <div class="app-container">
    <el-steps :active="active" align-center>
      <el-step icon="el-icon-edit" title="组织基础信息" description="步骤1"></el-step>
      <el-step icon="el-icon-notebook-2" title="配置组织菜单" description="步骤2"></el-step>
      <el-step icon="el-icon-user" title="设置组织管理员" description="步骤3"></el-step>
    </el-steps>
    <div style="margin: 20px;">
      <div v-show="active===1" style="display: none;">
        <el-form ref="groupForm" :model="groupData" :rules="groupRules" size="small" label-width="100px">
          <el-form-item label="组织名称" prop="groupName">
            <el-input v-model="groupData.groupName" placeholder="请输入组织名称" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <div v-show="active===2" style="display: none;">
        <el-tree ref="tree" show-checkbox :data="menu.data" :props="menu.props" :node-key="menu.nodeKey">
        </el-tree>
      </div>
      <div v-show="active===3" style="display: none;">
        <!-- <el-radio-group v-model="labelPosition" size="small" style="margin-left: 100px;">
          <el-radio-button label="left">分配管理员</el-radio-button>
          <el-radio-button label="right">新建管理员</el-radio-button>
        </el-radio-group> -->
        <div style="margin: 10px;"></div>
        <el-form ref="userIdForm" :model="userFormData" :rules="userRules" size="small" label-width="100px"
          v-show="labelPosition=='left'">
          <el-form-item label="管理员" prop="userId">
            <el-select v-model="userFormData.userId" placeholder="请选择" clearable :style="{width: '100%'}">
              <el-option v-for="item in userList" :key="item.userId" :label="item.nickname" :value="item.userId">
                <span style="float: left">{{ item.nickname }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.phone }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-form ref="userForm" :model="userFormData" :rules="userRules" size="small" label-width="100px"
          v-show="labelPosition=='right'">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="userFormData.username" placeholder="请输入用户名" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
          <el-form-item label="昵称" prop="nickname">
            <el-input v-model="userFormData.nickname" placeholder="请输入昵称" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="userFormData.password" placeholder="请输入密码" clearable show-password
              :style="{width: '100%'}"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="password2">
            <el-input v-model="userFormData.password2" placeholder="请再次输入密码" clearable show-password
              :style="{width: '100%'}"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="userFormData.phone" placeholder="请输入手机号" clearable :style="{width: '100%'}"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="userFormData.email" placeholder="请输入邮箱" clearable :style="{width: '100%'}"></el-input>
          </el-form-item>
          <el-form-item label="消息推送配置" prop="messageTypes">
            <el-checkbox-group v-model="userFormData.messageTypes" size="medium">
              <el-checkbox v-for="(item, index) in messageTypesOptions" :key="index" :label="item.value"
                :disabled="item.disabled">{{item.label}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div style="text-align: center;">
      <el-button-group>
        <el-button type="primary" @click="handlePrevious" v-show="active>1">
          <i class="el-icon-arrow-left"></i>上一步
        </el-button>
        <el-button type="primary" @click="handleNext" v-show="active<3">
          下一步<i class="el-icon-arrow-right el-icon--right"></i>
        </el-button>
        <el-button type="primary" @click="handleNext" v-show="active===3">提 交<i class="el-icon-upload"></i></el-button>
      </el-button-group>
    </div>
  </div>
</template>
<script>
  import {
    menuRoutes
  } from '@/router'
  import {
    deepClone
  } from '@/utils/index.js'
  import {
    SYS_MENU_API,
    SYS_GROUP_API,
    SYS_USER_API
  } from '@/api/systemApi.js'

  export default {
    data() {
      return {
        active: 1,
        // 步骤 1
        groupData: {
          groupName: undefined,
        },
        groupRules: {
          groupName: [{
            required: true,
            message: '请输入组织名称',
            trigger: 'blur'
          }],
        },
        // 步骤 2
        menu: {
          openPaths: [],
          data: [],
          nodeKey: 'path',
          props: {
            label: (data) => {
              if (data.meta) return data.meta.title;
              return data.children[0].meta.title;
            },
            disabled: (data) => {
              if (this.menu.openPaths.length === 1 && this.menu.openPaths[0] === '*') {
                return false;
              } else {
                return this.menu.openPaths.indexOf(data.path) === -1
              }
            }
          }
        },
        // 步骤 3
        labelPosition: 'right',
        userList: [],
        userFormData: {
          userId: undefined,
          username: undefined,
          nickname: undefined,
          password: undefined,
          password2: undefined,
          phone: undefined,
          email: undefined,
          messageTypes: [],
        },
        userRules: {
          userId: [{
            required: true,
            message: '请选择管理员',
            trigger: 'blur'
          }],
          username: [{
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }],
          nickname: [{
            required: true,
            message: '请输入昵称',
            trigger: 'blur'
          }],
          password: [{
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }],
          password2: [{
            required: true,
            message: '请再次输入密码',
            trigger: 'blur'
          }, {
            validator: (rule, value, callback) => {
              if (value !== this.userFormData.password) {
                callback(new Error());
              } else {
                callback();
              }
            },
            message: '两次输入密码不一致',
            trigger: 'blur'
          }],
          phone: [{
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
          }],
          email: [],
          messageTypes: [],
        },
        messageTypesOptions: [{
          "label": "站内信",
          "value": "MESSAGE"
        }, {
          "label": "邮箱",
          "value": "EMAIL"
        }, {
          "label": "短信",
          "value": "SMS"
        }, {
          "label": "微信模板消息",
          "value": "WECHAT_TEMPLATE"
        }],

      }
    },
    mounted() {
      this.loadInit();
    },
    methods: {
      async loadInit() {
        //获取管理员开放的菜单
        let res = await SYS_MENU_API.listAdministratorOpenMenus();
        this.menu.openPaths = res.data;
        //组织菜单
        this.menu.data = deepClone(menuRoutes);
        //用户列表
        let userRes = await SYS_USER_API.listNormalUsers();
        this.userList = userRes.data;
      },
      handlePrevious() {
        if (this.active > 1) this.active--
      },
      handleNext() {
        if (this.active === 1) {
          this.$refs['groupForm'].validate(valid => {
            if (!valid) return
            this.active++
          })
        } else if (this.active === 2) {
          if (this.$refs.tree.getCheckedKeys().length > 0) {
            this.active++
          } else {
            this.$message({
              message: '请勾选菜单',
              type: 'error'
            })
          }
        } else if (this.active === 3) {
          if (this.labelPosition == 'left') {
            this.$refs['userIdForm'].validate(valid => {
              if (!valid) return
              this.handelSubmit()
            })
          } else if (this.labelPosition == 'right') {
            this.$refs['userForm'].validate(valid => {
              if (!valid) return
              this.handelSubmit()
            })
          }
        }
      },
      async handelSubmit() {
        var params;
        if (this.labelPosition == 'right') {
          //新组织管理员
          params = deepClone({
            ...this.groupData,
            groupPaths: this.$refs.tree.getCheckedKeys().join(","),
            ...this.userFormData,
            messageTypes: this.userFormData.messageTypes.join(","),
            userId: undefined,
            password2: undefined
          })
        } else {
          params = deepClone({
            ...this.groupData,
            groupPaths: this.$refs.tree.getCheckedKeys().join(","),
            userId: this.userFormData.userId
          })
        }
        var res = await SYS_GROUP_API.addGroup(params);
        this.$message({
          message: res.message,
          type: 'success'
        })
        this.$router.push({
          path: './index'
        })
      },
    }
  }
</script>

<style scoped>
  .line {
    text-align: center;
  }

  .el-row {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
